/*
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-06-02 11:49:42
 */
import { GetHospitalListDetailResponse } from '@/api/hospital/hospitalList'
import { ReqHospitalListDetail } from '@/api/hospital/model/hospitalListTypes'
import { Button, Card, Descriptions, Skeleton } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'

export default function HospitalListDetail() {
    let navigate=useNavigate()
    // 声明医院详情状态
    let [hospitalDetail,setHospitalDetail]=useState<ReqHospitalListDetail>()
    // 获取url路由参数
    let {id}=useParams()
    useEffect(()=>{
        async function main(){
            let result=await GetHospitalListDetailResponse(id as string)
            setHospitalDetail(result)
        }
        main()
    },[])
    return (
        <Card>
            {
                hospitalDetail?
                <><Descriptions title="基本信息" bordered column={3}>
                <Descriptions.Item label="医院名称" span={1} style={{width:300}}>{hospitalDetail?.hospital.hosname}</Descriptions.Item>
                <Descriptions.Item label="医院logo" span={2}>
                    <img width={100} src={`data:image/gif;base64,${hospitalDetail?.hospital.logoData}`} alt="" />
                </Descriptions.Item>
                <Descriptions.Item label="医院编码" span={1}>{hospitalDetail?.hospital.cityCode}</Descriptions.Item>
                <Descriptions.Item label="医院地址" span={2}>{hospitalDetail?.hospital.param.fullAddress}</Descriptions.Item>
                <Descriptions.Item label="坐车路线" span={3}>{hospitalDetail?.hospital.route}
                </Descriptions.Item>
                <Descriptions.Item label="医院简介" span={3}>{hospitalDetail?.hospital.intro}
                </Descriptions.Item>
            </Descriptions>


            <Descriptions title="预约规则信息" bordered className='mt'>
                <Descriptions.Item label="预约周期" span={1} style={{width:300}}>{hospitalDetail?.bookingRule.cycle}</Descriptions.Item>
                <Descriptions.Item label="放号时间" span={2}>{hospitalDetail?.bookingRule.releaseTime}</Descriptions.Item>
                <Descriptions.Item label="停挂时间" span={1}>{hospitalDetail?.bookingRule.stopTime}</Descriptions.Item>
                <Descriptions.Item label="退号时间" span={2}>{hospitalDetail?.bookingRule.quitTime}</Descriptions.Item>
                <Descriptions.Item label="预约规则" span={3}>
                    {
                        hospitalDetail?.bookingRule.rule.map((item,index)=>{
                            return <p key={index}>{item}</p>
                        })
                    }
                </Descriptions.Item>
            </Descriptions>

            <Button className='mt' onClick={()=>{
                    navigate('/syt/hospital/hospitalList')
            }}>返回</Button></>
            :
            <>
                <Skeleton active />
                <Skeleton active />
                <Skeleton active />
                <Skeleton active />
            </>
            }
            
        </Card>
    )
}
